<template>
	<scroll-view @scrolltolower="handleToLower" class="recommends_view" scroll-y v-if="recommends.length>0">
		<!-- 推荐 开始 -->
		<view class="recommends_wrap">
			<navigator class="recommends_item"
			v-for="item in recommends"
			:key="item.id"
			:url="`/pages/album/index?id=${item.target}`"
			>
				<image mode="widthFix" :src="item.thumb"></image>
			</navigator>
		</view>
		<!-- 推荐 结束 -->
		
		<!-- 月份 开始 -->
		<view class="monthes_wrap">
			<view class="monthes_title">
				<view class="monthes_title_info">
					<view class="monthes_info">
						<text>{{monthes.MM}} / </text>
						{{monthes.DD}} 月
					</view>
					<view class="monthes_text">您负责美丽就好</view>
				</view>
				<view class="monthes_title_more">更多 > </view>
			</view>
			<view class="monthes_content">
				<view class="monthes_item"
				v-for="(item,index) in monthes.items"
				:key="item.id"
				>
					<go-detail :list="monthes.items" :index="index">
						<image mode="aspectFill" :src="item.thumb+item.rule.replace('$<Height>',360)"></image>
					</go-detail>
				</view>
			</view>
		</view>
		<!-- 月份 结束 -->

		<!-- 热门 开始 -->
		<view class="hots_wrap">
			<view class="hots_title">
				<text>热门</text>
			</view>
			<view class="hots_content">
				<view class="hot_item"
				v-for="(item,index) in hots"
				:key="item.id"
				>
				<go-detail :list="hots" :key="index">
					<image mode="widthFix" :src="item.thumb"></image>
				</go-detail>
				</view>
			</view>
		</view>
		<!-- 热门 结束 -->
	</scroll-view>
</template>

<script>
import moment from "moment";
import goDetail from "@/components/goDetail";
export default{
	components:{
		goDetail
	},
	data(){
		return{
			//推荐列表
			recommends:[],
			// 月份
			monthes:{},
			// 热门
			hots:[],
			// 请求的参数
			params:{
				//要获取几条
				limit:30,
				// 关键字
				order:"hot",
				// 要跳过几条
				skip:0
			},
			// 是否还有下一页
			hasMore:true

		};
	},
	mounted(){
		this.getList();
	},
	methods:{
		//获取接口数据
		getList(){
			this.request({
				url:"http://service.picasso.adesk.com/v3/homepage/vertical",
				data:this.params
			})
			.then(result=>{
				//判断还有没有下一页数组
				if(result.res.vertical===0){
					this.hasMore=false;
					uni.showToast({
						title: "没有更多数据了",
						icon: "none",
					});
					return;
				}
				if (this.recommends.length===0){
					// 第一次发送请求
					// 推荐模块
					this.recommends=result.res.homepage[1].items;
					// 月份模块
					this.monthes=result.res.homepage[2];
					// 将时间戳 改成 18号/月 moment.js
					this.monthes.MM=moment(this.monthes.stime).format("MM");
					this.monthes.DD=moment(this.monthes.stime).format("DD");
				}	
				// 获取热门数据列表
				// 数组拼接es6
				this.hots = [...this.hots, ...result.res.vertical];
			})
		},
		//滚动条触底事件
		handleToLower(){
			/*
				1修改参数 skip+=limit;
				2重新发送请求 getList()
				3请求回来成功 host数据叠加
			*/
			if(this.hasMore){
				this.params.skip += this.params.limit;
			    this.getList();
			}else{
				//弹窗提示用户
				uni.showToast({
					title:"没有数据了",
					icon:"none"
				})
			}
			
		}
	}
};
</script>

<style lang="scss" scoped>
	.recommends_view{
		height: calc( 100vh - 36px );
	}
	.recommends_wrap{
		display: flex;
		flex-wrap: wrap;
		.recommends_item{
			width: 50%;
			border: 5rpx solid #fff;
		}
	}
	.monthes_wrap{
		.monthes_title{
			display:flex;
			justify-content:space-between;
			padding: 20rpx;
			.monthes_title_info{
				color: $color;
				font-size: 30rpx;
				font-weight: 600;
				display: flex;
				.monthes_info{
					text{
						font-size: 36rpx;
					}
				}
				.monthes_text{
					font-size: 34rpx;
					color: #666;
					margin-left: 30rpx;
				}
			}
			.monthes_title_more{
				font-size: 24rpx;
				color:$color;
			}
		}
		.monthes_content{
			display: flex;
			flex-wrap: wrap;
			.monthes_item{
				width: 33.3%;
				border: 5rpx solid #fff;
			}
		}
	}
	.hots_wrap {
		.hots_title {
			padding: 20rpx;
			text {
				border-left: 20rpx solid $color;
				padding-left: 20rpx;
				font-size: 34rpx;
				font-weight: 600;
			}
		}
		.hots_content {
			display: flex;
			flex-wrap: wrap;
			.hot_item {
				width: 33.33%;
				border: 5rpx solid #fff;
			    image {

			    }
			}
		}
	}
</style>
